<template>
  <div class="city">
    <city-header></city-header>
    <search-header></search-header>
    <city-list    :cities="cities" :hotcities="hotCities"></city-list>
    <city-Alphabet :alpha="cities"></city-Alphabet>
  </div>
</template>
<script>
import cityHeader from './components/Header.vue'
import searchHeader from './components/Search.vue'
import CityList from './components/List.vue'
import cityAlphabet from './components/Alphabet.vue'
export default {
  data: () => ({
    cities: { },
    hotCities: [ ]

  }),
  mounted () {
    // const res=
    this.getData()
  },
  methods: {
    async getData () {
      const res = await this.$http.get('api/city.json')
      if (res.data.ret !== true) { return alert('数据读取失败') }
      console.log(res)
      this.cities = res.data.data.cities
      this.hotCities = res.data.data.hotCities
    }
  },
  components: {
    cityHeader,
    searchHeader,
    CityList,
    cityAlphabet
  }
}
</script>
<style lang="stylus" scoped>
</style>
